<template>
  <div class="date-picker">
    <van-field
      readonly
      :required="required"
      class="input_text no-border"
      name="calendar"
      :value="_date"
      :label="label"
      :label-width="labelWidth"
      :input-align="inputAlign"
      placeholder="点击选择日期"
      @click="openCalendar()"
    >
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-field>
    <van-field
      class="input_text"
      label=" "
      v-if="this.showFastSelect"
      label-width="labelWidth"
    >
      <template #input>
        <div>
          快捷选择：<span
            class="color-blue"
            @click="getOneWeek()"
          >一周</span><span
            class="ml-10 color-blue"
            @click="getTwoWeek()"
          >两周</span><span
            class="ml-10 color-blue"
            @click="getOneMounth()"
          >一个月</span>
        </div>
      </template>
    </van-field>
    <van-calendar
      color="#1989fa"
      v-model="showCalendar"
      :min-date="new Date('2000-01-01')"
      :max-date="new Date('2070-12-30')"
      :default-date="tempDate"
      @confirm="onConfirm"
    />
  </div>
</template>
<script>
import { getDate, dateAdd } from "@/utils/getDate";
export default {
  name: "eagle-date",
  props: {
    required: {},
    label: {},
    labelWidth: {
      type: [Number,String],
      default: '100px'
    },
    date: {},
    showFastSelect: {},
    IsCurrentTime: {
      type: [Boolean],
      default() {
        return true;
      },
    },
    inputAlign:{
      type: [String],
      default: 'left'
    }
  },
  data() {
    return {
      showCalendar: false,
      tempDataString: null,
      tempDate: new Date(),
    };
  },
  computed: {
    _date: {
      get() {
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        var date1 = yy + "-" + mm + "-" + dd;
        // if (!this.tempDataString) {
        // this.tempDataString = getDate(this.date);
        this.tempDate = this.date ? new Date(getDate(this.date)) : new Date();

        if (this.IsCurrentTime == false && !this.date) {
          this.tempDataString = "";
          this.$emit("update:date", this.tempDataString);
        } else {
          this.tempDataString = this.date ? getDate(this.date) : getDate(date1);
          this.$emit("update:date", this.tempDataString);
        }
        // this.tempDate = this.date
        //   ? new Date(getDate(this.date))
        //   : getDate(date1);
        // }
        // if (!this.date) {
        //   this.$emit("update:date", this.tempDataString);
        // }
        return this.tempDataString;
      },
      set(value) {
        this.tempDataString = value;
        this.$emit("update:date", value);
      },
    },
  },
  methods: {
    openCalendar() {
      this.showCalendar = true;
    },
    onConfirm(date) {
      this._date = getDate(date);
      this.tempDate = date;
      this.showCalendar = false;
    },
    // 一周
    getOneWeek() {
      let date = dateAdd("w", 1, new Date());
      this.tempDate = date;
      this._date = getDate(this.tempDate);
    },
    // 两周
    getTwoWeek() {
      let date = dateAdd("w", 2, new Date());
      this.tempDate = date;
      this._date = getDate(this.tempDate);
    },
    getOneMounth() {
      let date = dateAdd("m", 1, new Date());
      this.tempDate = date;
      this._date = getDate(this.tempDate);
    },
  },
};
</script>
<style scoped="less">
.date-picker {
  position: relative;
}
.date-picker::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0.42667rem;
  bottom: 0;
  left: 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
